<template>
  <el-dialog
      v-dialogDrag
      v-loading="loading"
      append-to-body
      top="6vh"
      :width="width"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :type="type"
      :title="title"
      :visible.sync="detailVisible">
      <el-row :gutter="20">
        <el-col :span="24"><div class="grid-content">地点：{{ testAddress }}</div></el-col>
      </el-row>
     <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="itemName"
        label="项目">
      </el-table-column>
      <el-table-column
        prop="itemResult"
        label="得分">
      </el-table-column>
      <el-table-column
        prop="itemScore"
        label="成绩">
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import '@/utils/directives.js'
  import { getScreenWidth } from '@/utils'
  export default {
    components: {  },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'detail'
      }
    },
    data () {
      return {
        dataForm: {},
        testAddress: '',
        tableData: [],
        loading: false,
        width: getScreenWidth(),
        dataRule: {
        }
      }
    },
    computed: {
      detailVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      },
      title() {
        return this.$t('common.' + this.type)
      }
    },
    watch: {},
    mounted () {
      window.onresize = () => {
        return (() => {
          this.width = getScreenWidth()
        })()
      }
    },
    methods: {
      initDataForm() {
        return []
      },
      loadTableData(id, testAddress) {
        this.$http({
            url: this.$http.requestUrl('/test/tzjktestitem/info/list'),
            method: 'post',
            data: JSON.stringify({
              testId: id
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.tableData = this.sortTableData(data.data);
              this.testAddress = testAddress;
            } else {
              this.$message.error(data.msg)
            }
          })
      },
      setDataForm(val) {
        if (val) {
          this.dataForm = { ...val }
          this.loadTableData(this.dataForm.testId, this.dataForm.testAddress)
        }
      },
      sortTableData(dataList) {
        if(Array.isArray(dataList) && dataList.length > 2) {
          var height, weight;
          var sortedArr = [];
          for(var i in dataList) {
            var item = dataList[i];
            if(item.itemCode == '01') {
              height = item;
            } else if(item.itemCode == '02') {
              weight = item;
            } else {
              sortedArr.push(item);
            }
          }
          if(weight) {
            sortedArr.unshift(weight);
          }
          if(height) {
            sortedArr.unshift(height);
          }
          dataList = sortedArr;
        }
        return dataList;
      },
      close() {
        this.$emit('close')
      },
      needSpan(data) {
        if(Array.isArray(data) && data.length === 0) {
          return false;
        }
        var itemCodeArr = data.map(item => item.itemCode);
        // 判断是否包含身高和体重，全部包含才需要合并单元格
        return itemCodeArr.indexOf('01') >= 0 && itemCodeArr.indexOf('02')  >= 0
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) {
          if (rowIndex === 0) {
            if(this.needSpan(this.tableData)) {
              return {
                rowspan: 2,
                colspan: 1
              };
            }
          }
          return {
              rowspan: 1,
              colspan: 1
          };
        }
      }
    }
  }
</script>